<template>
    <view class="confirm-order bg-active-color">
        <!-- 地址 -->
        <view class="order-map">
            <view class="map-title">
                <view class="map-name">
                    <icon class="user-icon" type="person" size="30"></icon>
                    参赛人:{{formData.name}}
                </view>
                <view style="margin-left: 10px;">
                    <icon class="phone-icon" type="phone" size="30"></icon>
                    联系方式:{{formData.contact}}
                </view>
            </view>
            <view class="map-add">
                <icon class="time-icon" type="time" size="30"></icon>
                报名时间:{{formData.registrationDate}}
                <span style="margin-left: 40px;">
                    <icon class="organization-icon" type="organization" size="30"></icon>
                    主办方:{{event.createdBy}}
                </span>
            </view>
        </view>

        <!-- 订单信息 -->
        <view class="goods-content bg-active-color">
            <!-- 动态绑定图片 src 属性 -->
            <image class="goods-img" :src="'http://localhost:8080' + event.imageUrl" mode="aspectFill"></image>
            <view class="goods-text">
                <!-- 动态显示商品名称 -->
                <view class="goods-name">
                    <icon class="game-icon" type="game" size="30"></icon>
                    赛事名称 {{ event.name }}
                </view>
                <!-- 新增比赛场地显示 -->
                <view class="goods-venue f-color" style="font-size: 12px;">
                    <icon class="location-icon" type="location" size="25"></icon>
                    比赛场地: {{ event.address }}
                </view>
                <!-- 动态显示颜色分类，这里没有颜色分类，可根据实际情况修改 -->
                <view class="goods-size f-color">
                    <icon class="reward-icon" type="gift" size="25"></icon>
                    比赛奖励: {{ event.reward }}
                </view>
                <!-- 动态显示退换政策，这里没有退换政策，可根据实际情况修改 -->
                <view class="f-active-color" style="font-size: 12px;">
                    <icon class="date-icon" type="date" size="25"></icon>
                    比赛时间: {{ event.registrationStartTime }} - {{ event.registrationEndTime }}
                </view>
                <!-- 动态显示商品价格 -->
                <!--       <view class="goods-price">
                    <icon class="money-icon" type="money" size="30"></icon>
                    ￥{{ event.eventCost }}.00
                </view> -->
            </view>
        </view>

        <view class="pay-main" style="margin-top: 310px;">
            <view class="pay-methods">
                <label class="pay-item" :class="{ 'selected': selectedPayment === 'alipay' }"
                    @click="selectPayment('alipay')">
                    <image class="pay-img" src="@/static/event/zfbzf.png" mode=""></image>
                    <view class="pay-text-group">
                        <view class="pay-title">支付宝支付</view>
                        <view class="pay-txt">推荐支付宝用户使用</view>
                    </view>
                    <radio :value="'alipay'" :checked="selectedPayment === 'alipay'" color="#ff3333"
                        style="margin-right: 20rpx;" />
                </label>
                <label class="pay-item" :class="{ 'selected': selectedPayment === 'wechat' }"
                    @click="selectPayment('wechat')">
                    <image class="pay-img" src="@/static/event/wxzf.png" mode=""></image>
                    <view class="pay-text-group">
                        <view class="pay-title">微信支付</view>
                        <view class="pay-txt">推荐微信用户使用</view>
                    </view>
                    <radio :value="'wechat'" :checked="selectedPayment === 'wechat'" color="#ff3333"
                        style="margin-right: 20rpx;" />
                </label>
            </view>
        </view>

        <view class="pay-foot">
            <view class="total">
                <text class="f-color">合计:</text>
                <text class="total-price">$ {{ calculateTotalPrice() }}</text>
            </view>
            <view class="go-pay" @click="handlePay">
                去支付
            </view>
        </view>
        <!-- 支付键盘包裹元素 -->
	<view :class="{'keyboard-container': true, 'keyboard-slide-up': showPaymentKeyboard}">
	  <!-- 将跳转路径传给 PaymentKeyboard -->
	  <PaymentKeyboard 
	    :amount="payAmount" 
	    @key-click="handleKeyClick" 
	    :redirectTo="'/pages/match/eventDetail?id=' + event.id"
	    @payment-success="handlePaymentSuccess(redirectTo)" 
		@password-confirm="processPayment"
	  />
	</view>
    </view>
</template>


<script>
    import PaymentKeyboard from '@/component/PaymentKeyboard.vue';
	import {updateOrderStatus} from '@/api/match/event.js'
    export default {
        data() {
            return {
                event: {},
                formData: {},
                selectedPayment: null,
                showPaymentKeyboard: false,
				registrationId:'',
            };
        },
        components: {
            PaymentKeyboard
        },
		 computed: {
		        // 计算属性用于动态获取支付金额
		        payAmount() {
		          return String(this.calculateTotalPrice()); // 确保返回的是字符串
		        }
		    },
        onLoad(options) {
            if (options.event) {
                try {
                    this.event = JSON.parse(decodeURIComponent(options.event));
                } catch (error) {
                    console.error('解析 event 参数出错:', error);
                }
            }
            if (options.formData) {
                try {
                    this.formData = JSON.parse(decodeURIComponent(options.formData));
                } catch (error) {
                    console.error('解析 formData 参数出错:', error);
                }
            }
			if (options.registrationId) {
			    try {
			        this.registrationId = decodeURIComponent(options.registrationId);
					 console.log('Registration ID:', this.registrationId); // 打印 registrationId
			    } catch (error) {
			        console.error('解析 registrationId 参数出错:', error);
			    }
			}
        },
        methods: {
            // 计算总价的方法
            calculateTotalPrice() {
                return this.event.eventCost || 0;
            },
            handlePay() {
                if (!this.selectedPayment) {
                    console.log('请选择支付方式');
                    return;
                }
                this.showPaymentKeyboard = true;
                // 这里可以添加实际的支付逻辑
                console.log('选择的支付方式:', this.selectedPayment);
            },
            selectPayment(paymentMethod) {
                this.selectedPayment = paymentMethod;
                console.log('当前选择的支付方式:', paymentMethod);
            },
            handleKeyClick(key) {
                // 这里可以添加处理按键点击的逻辑
                console.log('按下的键:', key);
            },
			//支付
			processPayment(){
				console.log('id是',this.registrationId);
			updateOrderStatus(this.registrationId).then(res => {
				console.log(res);
			})
			.catch(res=>{
				console.log(res);
			})
			}
        }
    };
</script>

<style lang="less">
	// 全局样式变量
	// 去除变量名中的空格
	@main-bg-color: #f9f9f9;
	@card-bg-color: #fff;
	@primary-color: #49bdfb;
	@text-color: #333;
	@sub-text-color: #666;
	@border-color: #e5e5e5;
	@icon-color: #49bdfb;
	
	.confirm-order {
	    position: absolute;
	    left: 0;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	    // 使用正确的变量名
	    background-color: @main-bg-color;
	    padding: 30rpx;
	    box-sizing: border-box;
	    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	    display: flex;
	    flex-direction: column;
	}
	
	.order-map {
	    margin-bottom: 30rpx;
	    padding: 30rpx;
	    // 使用正确的变量名
	    background-color: @card-bg-color;
	    line-height: 60rpx;
	    border-radius: 20rpx;
	    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	    transition: all 0.3s ease;
	}
	
	.order-map:hover {
	    box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.12);
	}
	
	.map-title {
	    display: flex;
	    justify-content: space-between;
	    font-size: 32rpx;
	    // 使用正确的变量名
	    color: @text-color;
	}
	
	.map-name,
	.map-add {
	    display: flex;
	    align-items: center;
	}
	
	.map-name.user-icon,
	.map-add.time-icon,
	.map-add.organization-icon {
	    margin-right: 15rpx;
	    // 使用正确的变量名
	    color: @icon-color;
	}
	
	.map-name {
	    font-weight: bold;
	}
	
	.map-add {
	    font-size: 30rpx;
	    // 使用正确的变量名
	    color: @sub-text-color;
	}
	
	.goods-content {
	    padding: 30rpx;
	    // 使用正确的变量名
	    background-color: @card-bg-color;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    border-radius: 20rpx;
	    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	    transition: all 0.3s ease;
	    margin-bottom: 30rpx;
	}
	
	.goods-content:hover {
	    box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.12);
	}
	
	.goods-img {
	    width: 200rpx;
	    height: 200rpx;
	    border-radius: 20rpx;
	    object-fit: cover;
	    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.goods-text {
	    width: 400rpx;
	    padding: 0 20rpx;
	    font-size: 30rpx;
	    // 使用正确的变量名
	    color: @text-color;
	}
	
	.goods-name,
	.goods-venue.f-color,
	.goods-size.f-color,
	.f-active-color {
	    display: flex;
	    align-items: center;
	}
	
	.goods-name.game-icon,
	.goods-venue.f-color.location-icon,
	.goods-size.f-color.reward-icon,
	.f-active-color.date-icon {
	    margin-right: 15rpx;
	    // 使用正确的变量名
	    color: @icon-color;
	}
	
	.goods-name {
	    font-weight: bold;
	    margin-bottom: 15rpx;
	}
	
	.goods-venue.f-color {
	    font-size: 28rpx;
	    // 使用正确的变量名
	    color: @sub-text-color;
	    margin-bottom: 15rpx;
	}
	
	.goods-size.f-color {
	    font-size: 28rpx;
	    // 使用正确的变量名
	    color: @sub-text-color;
	    margin-bottom: 15rpx;
	}
	
	.f-active-color {
	    font-size: 28rpx;
	    // 使用正确的变量名
	    color: @primary-color;
	}
	
	.goods-price {
	    font-size: 36rpx;
	    // 使用正确的变量名
	    color: @primary-color;
	    font-weight: bold;
	    display: flex;
	    align-items: center;
	}
	
	.goods-price.money-icon {
	    margin-right: 15rpx;
	    // 使用正确的变量名
	    color: @icon-color;
	}
	
	
	.total-price {
	    padding: 0 20rpx;
	    font-size: 32rpx;
	    // 使用正确的变量名
	    color: @text-color;
	}
	
	.f-active-color {
	    // 使用正确的变量名
	    color: @primary-color;
	}
	
	.pay-main {
	    margin-top: 310px;
	}
	
	.pay-methods {
	    display: flex;
	    justify-content: space-around;
	}
	
	.pay-item {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    padding: 20rpx;
	    border: none;
	    cursor: pointer;
	}
	
	.pay-item.disabled {
	    cursor: not-allowed;
	    opacity: 0.6;
	}
	
	.pay-item.selected {
	    background-color: #eaf6ff;
	}
	
	.pay-img {
	    width: 100rpx;
	    height: 100rpx;
	}
	
	.pay-text-group {
	    display: flex;
	    flex-direction: column;
	    margin-top: 10px;
	}
	
	.pay-title {
	    font-size: 30rpx;
	}
	
	.pay-txt {
	    color: #bbb;
	    font-size: 24rpx;
	}
	
	.pay-foot {
	    width: 100%;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    height: 100rpx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	
	.total-price {
	    color: #fff;
	}
	
	.total {
	    padding-left: 100rpx;
	    flex: 1;
	    background-color: #000;
	    line-height: 100rpx;
	}
	
	.go-pay {
	    color: #fff;
	    background-color: #49bdfb;
	    line-height: 100rpx;
	    text-align: center;
	    width: 220rpx;
	}
	
	.f-color {
	    color: #ccc;
	}
	
	// 支付键盘容器样式
	.keyboard-container {
	    position: fixed;
	    bottom: -100%; /* 初始位置在屏幕下方 */
	    left: 0;
	    width: 100%;
	    background-color: #fff;
	    transition: bottom 0.3s ease; /* 添加过渡效果 */
	}
	
	// 键盘向上滑动的样式
	.keyboard-slide-up {
	    bottom: 0; /* 滑动到屏幕底部 */
	}
</style>